<template>
  <div class="user">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="inputserch" class="input-with-select" style="width:300px" @keydown.native.13="seachbtn">
        <el-button slot="append" icon="el-icon-search" @click="seachbtn"></el-button>
      </el-input>
      <el-button type="success" plain @click='addUserdata'>添加用户</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="users" border style="width: 100% ;margin-top: 15px;">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="username" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180">
      </el-table-column>
      <el-table-column prop="mobile" label="电话号码">
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change="updactive(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip content="角色" placement="top">
            <el-button type="warning" icon="el-icon-share" plain @click="warningBtn(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="编辑" placement="top">
            <el-button type="success" icon="el-icon-edit" plain @click="upduserdata(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button type="danger" icon="el-icon-delete" plain @click="del(scope.row.id)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页   current-page当前页数   每页显示条目个数
      :page-size="100"-->
    <el-pagination style="margin-top: 15px; background-color: pink;  text-align: center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 1, 2, 3 ]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 点击编辑弹出层 -->
    <el-dialog title="编辑管理员信息" :visible.sync="dialogFormVisible">
      <el-form :model="formuser" ref='formuser'>
        <el-form-item label="名字" :label-width="formLabelWidth">
          <el-input v-model="formuser.username" auto-complete="off"  disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="formuser.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input v-model="formuser.mobile" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getformuserdata('formuser')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 点击添加用户弹出层 -->
    <el-dialog title="添加管理员信息" :visible.sync="addFormVisible">
      <el-form :model="addform" ref='addform' :rules="rules">
        <el-form-item label="名字" prop="username" :label-width="formLabelWidth">
          <el-input v-model="addform.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
          <el-input v-model="addform.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
          <el-input v-model="addform.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="mobile" :label-width="formLabelWidth">
          <el-input v-model="addform.mobile" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addformuserdata('addform')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 点击授权角色弹出层 -->
    <el-dialog title="授权角色" :visible.sync="rolesdialogFormVisible">
      <el-form :model="rolesformuser">
        <el-form-item label="名字" :label-width="formLabelWidth">
          <el-input v-model="rolesformuser.username" auto-complete="off"   disabled=""></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select v-model="valueroles" placeholder="请选择" @change="setroles">
            <el-option v-for="item in rolesoptions" :key="item.id" :label="item.roleName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rolesdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="rolesformuserdata">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAlldata,
  deluserdata,
  putuserdata,
  addUser,
  upduseractive,
  getAllroles,
  getByIdRoles,
  setuserroles
} from '@/api/index.js'
export default {
  data () {
    return {
      rolesformuser:
        {
          username: '',
          id: '',
          rid: ''
        },

      rolesdialogFormVisible: false,
      rolesoptions: [],
      valueroles: '',
      inputserch: '',
      total: 0,
      currentPage: 4,
      pagenum: 1,
      pagesize: 10,
      users: [],
      rules: {
        username: [
          { required: true, message: '请输入正确的用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          {
            required: true,
            message: '请输入正确的邮箱',
            trigger: 'blur,change'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入合法的密码',
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      dialogFormVisible: false,
      addFormVisible: false,
      formuser: {
        email: '',
        create_time: '',
        role_name: '',
        mobile: '',
        username: ''
      },
      formLabelWidth: '120px',
      addform: {
        email: '',
        password: '',
        mobile: '',
        username: ''
      }
    }
  },
  mounted () {
    // 获取所有数据
    this.getAllUsersdata()
  },
  methods: {
    // 选择角色获取id
    setroles () {
      this.rolesformuser.rid = this.valueroles
    },
    // 点击授权按钮
    warningBtn (row) {
      this.rolesdialogFormVisible = true
      this.rolesformuser.id = row.id
      this.rolesformuser.username = row.username
      getByIdRoles(this.rolesformuser.id).then(res => {
      })

      getAllroles().then(res => {
        this.rolesoptions = res.data
      })
    },
    // 点击确定授权角色
    rolesformuserdata () {
      setuserroles(this.rolesformuser).then(res => {
        if (res.meta.status === 200) {
          this.$message.success(res.meta.msg)
        } else {
          this.$message.error(res.meta.msg)
        }
      })
      this.rolesdialogFormVisible = false
    },
    // 修改状态
    updactive (row) {
      upduseractive(row).then(res => {
        if (res.meta.status === 200) {
          this.$message.success(res.meta.msg)
          this.getAllUsersdata()
        } else {
          this.$message.error(res.meta.msg)
        }
      })
    },
    // 点击搜索
    seachbtn () {
      this.getAllUsersdata()
    },
    // 添加用户
    addUserdata () {
      // 弹框
      this.addFormVisible = true
    },
    // 点击确定发送请求
    addformuserdata (addform) {
      this.$refs['addform'].validate(valid => {
        if (valid) {
          // 发送数据
          addUser(this.addform).then(res => {
            if (res.meta.status === 201) {
              this.addFormVisible = false
              this.$message.success(res.meta.msg)
              this.getAllUsersdata()
            } else {
              this.$message.error(res.meta.msg)
            }
          })
        } else {
          this.$message({
            type: 'erroe',
            message: '请输入正确的数据'
          })
        }
      })
    },
    // 点击编辑
    upduserdata (row) {
      this.dialogFormVisible = true
      this.formuser.username = row.username
      this.formuser.email = row.email
      this.formuser.mobile = row.mobile
      this.formuser.id = row.id
    },
    // 点击删除
    del (id) {
      this.$confirm('此操作将永久删除id' + id + '为该文件, 是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deluserdata(id).then(res => {
            this.getAllUsersdata()
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击更新的确定按钮
    getformuserdata (formuser) {
      this.$refs[formuser].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          putuserdata(this.formuser).then(res => {
            if (res.meta.status === 200) {
              console.log(res.data)
              this.$message({
                type: 'success',
                message: res.meta.msg
              })
              this.getAllUsersdata()
            } else {
              this.$message({
                type: 'erroe',
                message: res.meta.msg
              })
            }
          })
        } else {
          this.$message({
            type: 'erroe',
            message: '请输入正确的数据'
          })
        }
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.getAllUsersdata()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pagenum = val
      this.getAllUsersdata()
    },
    // 获取所有数据
    getAllUsersdata () {
      getAlldata({
        query: this.inputserch,
        pagenum: this.pagenum,
        pagesize: this.pagesize
      }).then(res => {
        if (res.meta.status === 200) {
          this.users = res.data.users
          this.total = res.data.total
        } else {
          console.log(3333333333)
          console.log(res)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 覆盖element导航菜单的样式 */
.el-breadcrumb {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>
